<template>
	<div class="accountPage">
		
		<div class="accountAllPage">
		
			<div class="top_fixed">
				<p>会员储值</p>
				<van-icon name="arrow-left"  @click="backToOrder"/>
			</div>
			
			<div class="middle">
				<div class="account_top">
								<van-row type="flex" class="top_content">
									<van-col span="22">账户余额</van-col>
									<van-col span="2">￥0</van-col>
								</van-row>
								<van-row  type="flex">
									<van-col span="7"  class="down_content">
										<img src="../assets/my/买单.png" >
										<p>交易记录</p>
									</van-col>
									<van-col span="17"  class="down_content">
										<p> |&nbsp;</p>
										<img src="../assets/my/储值.png" >
										<p>余额转赠</p>
									</van-col>
									
								</van-row>
								
							</div>
						
						   <div class="account_down">
								<p class="title">储值金额</p>
								<van-tabs class="account_card">
								  <van-tab v-for="index in arr_money" :title="' ' + index">
								   <p> {{ index }}</p>
								  </van-tab>
								</van-tabs>
							<p class="title">你将获得：</p>
							<ul>
								<li>满20元减3元堂食优惠券1张</li>
								<li>满18元减2元堂食优惠券1张</li>
							</ul>
							<p class="title">使用说明：</p>
							<div class="article">
								<p> 1、储值100元赠送价值5元的堂食满减优惠券。</p>
								 <p> 2、用户可在乡村基点餐小程序购买储值卡，大额购买
								  时，只接受银行转账。</p>
								<p>3、储值卡一经购买，不提供透支、提现、转账到银行
								  卡、退/换卡等服务。</p>
								 <p>4、购买储值卡的用户，可用于乡村基堂食/外卖小程
								  序点餐使用。</p>
								 <p> 5、储值成功可开具预付款发票，点餐时不可开具发票。</p>
								<p>6、使用储值卡进行支付的用户，可正常会员积分。使
								  用赠送的优惠券部分不进行会员积分。</p>
							</div>
						
						 
					
						   </div>
			</div>
			
			<div class="bottom_fixed">
				<p>确认购买</p>
			</div>
		   
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default{
	name:'accountPage',
	data(){
		return{
			arr_money:['100元','200元','300元','500元','1000元']
		}
	},
	methods:{
		backToOrder(){
			this.$router.go(-1)
		}
	}
}
</script>

<style scoped>
	
.accountAllPage{
	background-color: #f5f5f5;
	height: auto;
	
}
.top_fixed{
	position: fixed;
	top: 0;
	z-index: 10;
	width: 375px;
	height: 50px;
	background-color: #e91f3c;
	color: white;
}
.top_fixed p{
	font-size: 16px;
	font-weight: 600;
}
.top_fixed .van-icon{
	
	display: block;
	width: 25px;
	height: 25px;
	margin-top: -35px;
}


.bottom_fixed{
	position: fixed;
	bottom: 0;
	height: 50px;
	width: 375px;
	color: white;
	background-color: white;
	
}
.bottom_fixed p{
	background-color: #e91f3c;
	width: 355px;
	height: 40px;
	margin: 5px 8px 5px 8px;
	border-radius: 25px;
	font-size: 20px;
	line-height: 40px;
}
.account_top{
	margin-top: 60px;
	width: 375px;
	height: 150px;
	background-color: white;
	
}
.account_top .top_content{
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	margin: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #9a9a9a;
}
.account_top .down_content{
	display: flex;
}
.account_top img{
	width: 20px;
	height: 20px;
	margin: 10px;
}
.account_top p{
	font-size: 16px;
	margin-top: 10px;
}
.account_down{
	margin-top: 10px;
	width: 375px;
	height: auto;
	background-color: white;

}
.account_down p{
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	margin: 10px;
}
.account_down .account_card p{
	width: 300px;
	height: 150px;
	box-sizing: border-box;
	background-color: #e91f3c;
	border-radius: 15px;
	margin-top: 10px;
	margin-left: 40px;
	color: white;
	font-weight: 100;
	font-size: 50px;
	text-align: left;
	padding: 10px;	
}


.article p{
	font-size: 15px;
	text-align: left;
	font-weight: 400;
}
</style>
